<template>
	<view>
		<ttBar title="我的团" leftIcon="icon-back"></ttBar>
		<view class="content">
			<block v-for="(item,index) in list" :key="index">
				<myGroupItem :orderItem="item"></myGroupItem>
			</block>
			<block v-if="list.length<1">
				<empty-box ></empty-box>
				<button class="openGroup" data-url="groupList" @tap="toPage">去开团</button>
			</block>
		</view>
		<shareAction ref="shareAction" :id="shareId" :type="1"></shareAction>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	import myGroupItem from "@/components/myGroup/myGroupItem.vue";
	export default {
		components:{myGroupItem},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
			})
		},
		data() {
			return {
				shareId:0,
				hasNext:true,
				page_no:1,
				page_size:10,
				list:[]
			};
		},
		methods:{
			getData(){
				if(this.hasNext){
					this.$store.dispatch("apiGetMyGroupList",{
						userId:this.userInfo.userId,
						page_no:this.page_no,
						page_size:this.page_size
					}).then(res=>{
						this.list=this.list.concat(res.data.data.items);
						this.hasNext=res.data.data.hasNext;
						this.page_no=res.data.data.nextPage;
					})
				}else {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					});
				}
			}
		},
		onLoad() {
			this.getData();
			uni.$on("showShareList",payload=>{
				this.shareId=payload.id
				let _href='';
				if(this.isLogin){
					_href='pages/index/index?url=myGroupDetail&id='+payload.id+'&uid='+this.userInfo.userId
				}else{
					_href='pages/index/index?url=myGroupDetail&id='+payload.id
				}
				this.$refs.shareAction.setShareData({
					title:payload.title,
					img:payload.img?payload.img:'http://s.de123.com/kf.png',
					href:_href,
					cntText:''
				})
				this.$refs.shareAction.open()
			})
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.page_no=1;
				this.list=[];
				this.hasNext=true;
				this.getData();
				uni.stopPullDownRefresh();
			}, 1500)
			
		},
		onReachBottom() {
			this.getData();
		}
		
	}
</script>

<style lang="less" >
	page{
		background-color: #f6f6f6;
	}
	.content{
		padding: 15upx 24upx;
		display: flex;
		flex-direction: column;
	}
	.openGroup{
		// margin: 0;
		margin-top: 40upx;
		font-size: 32upx;
		height: 90upx;
		line-height: 90upx;
		border-radius: 45upx;
		background-color: rgb(232, 12, 12);
		color: #FFFFFF;
		padding: 0;
		width: 50%;
	}
</style>
